<template>
  <view class="strategy">
    <CustomHeader :scroll-top="scrollTop" :title="'攻略详情'" />
    <view class="strategy-title">{{ strategyTitle }}攻略</view>
    <!-- 攻略列表 -->
    <AtAccordion
      v-for="({ activity_strategy_title, id, activity_strategy_describe, open },index) in strategyList"
      :key="id"
      :has-border="!open"
      :on-click="()=>{ onClick(open,index) }"
      :data-index="index"
      :title="activity_strategy_title"
      :open="open"
      :is-animation="false"
    >
      <view class="strategy-accordion__content">{{ activity_strategy_describe }}</view>
    </AtAccordion>
    <!-- 教师二维码 -->
    <view v-if="qrCode" class="strategy-add-teacher">
      <view>添加老师获取1对1服务</view>
      <image :lazy-load="true" :src="qrCode" :show-menu-by-longpress="true" />
      <view class="strategy-add-teacher-wechat">微信号：{{ wechat }}</view>
      <view class="strategy-add-teacher-copy" @tap="copyWechat">复制微信号</view>
    </view>
  </view>
</template>

<script>
import CustomHeader from "_c/custom-header/index.vue"
import { Component, Vue } from "vue-property-decorator"
import { AtAccordion } from "taro-ui-vue"
import { strategyLists } from "_api/strategy"
import { receiveTeacher } from "_api/home"
import "./index.scss"
import Taro from "@tarojs/taro"

export default {
  components: { AtAccordion, CustomHeader },
  data () {
    return {
      /* 攻略标题 */
      strategyTitle: "",
      /* 攻略列表 */
      strategyList: [],
      /*  二维码图片 */
      qrCode: "",
      scrollTop: 0,
      wechat: ''
    }
  },
  computed: {
    cityId () {
      return Taro.getStorageSync("city_id")
    },
    gradeId () {
      return Taro.getStorageSync("grade_id")
    }
  },
  onPageScroll ({ scrollTop }) {
    this.scrollTop = scrollTop
  },
  created () {
    this.getStrategyList()
    this.getTeacherInfo()
  },
  methods: {
    copyWechat () {
      Taro.setClipboardData({
        data: this.wechat
      })
    },
    /* 获取接待老师信息 */
    async getTeacherInfo () {
      const {
        data: { qrcode_url, phone },
      } = await receiveTeacher({ city_id: this.cityId, grade_id: this.gradeId })
      this.qrCode = qrcode_url
      this.wechat = phone
    },

    /* 获取攻略列表 */
    async getStrategyList () {
      const { id } = this.getParams
      const { data } = await strategyLists({ id })
      if (data && data.length) {
        this.strategyTitle = data[0].activity_title
        data.forEach((v) => {
          v.open = false
        })
      }
      this.strategyList = data
    },
    /* 点击 AtAccordion 展开收起*/
    onClick (val, index) {
      this.$set(this.strategyList[index], "open", !val)
    }
  }


}
</script>
